<template>
  <div class="frame-animation">
    <img
      :src="frames[currentFrameIndex]"
      alt="Frame Animation"
      class="animated-image"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import image1 from "../assets/image/earth/1.png";
import image2 from "../assets/image/earth/2.png";
import image3 from "../assets/image/earth/3.png";
import image4 from "../assets/image/earth/4.png";
import image5 from "../assets/image/earth/5.png";
import image6 from "../assets/image/earth/6.png";
import image7 from "../assets/image/earth/7.png";
import image8 from "../assets/image/earth/8.png";

const frames = ref([
  image1,
  image2,
  image3,
  image4,
  image5,
  image6,
  image7,
  image8,
]);
const currentFrameIndex = ref(0);
const frameInterval = ref(null);

const nextFrame = () => {
  if (currentFrameIndex.value < 7) {
    currentFrameIndex.value += 1;
  } else {
    currentFrameIndex.value = 0;
  }
};

const startAnimation = () => {
  frameInterval.value = setInterval(nextFrame, 250); // 100毫秒切换一次帧
};

const stopAnimation = () => {
  if (frameInterval.value) {
    clearInterval(frameInterval.value);
  }
};

onMounted(async () => {
  // await loadImages();
  startAnimation();
});

onUnmounted(() => {
  stopAnimation();
});
</script>

<style scoped>
.frame-animation {
  width: 404px; /* 根据你的图片尺寸调整 */
  height: 391px; /* 根据你的图片尺寸调整 */
  overflow: hidden;
  position: relative;
}

.animated-image {
  width: 100%;
  height: 100%;
  animation: scaleImage 1s ease-in-out infinite;
}
</style>
